//

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:video_player/video_player.dart';
import 'package:yp/Xwidgets/cache_image.dart';
import 'package:yp/Xwidgets/video_thumb.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';
import 'package:yp/utils/videoplayer/video_player_plus.dart';

import 'logic.dart';
import 'state.dart';

class ViewCommentsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ViewCommentsPage();
  }
}

class _ViewCommentsPage extends State<ViewCommentsPage> {
  final ViewCommentsLogic logic = Get.put(ViewCommentsLogic());
  final ViewCommentsState state = Get.find<ViewCommentsLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: setWidth(1),
        backgroundColor: Colors.white,
        title: Text(
          '查看评价',
          style: TextStyle(
            color: Color(0xff030303),
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff030303),
        ),
      ),
      body: GetBuilder<ViewCommentsLogic>(
        builder: (logic) {
          return Container(
            color: Color(0xffF5F5F5),
            padding: EdgeInsets.only(
              bottom: setWidth(20),
            ),
            child: ListView.separated(
              itemBuilder: (context, index) {
                return _itemWidget(index: index);
              },
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(height: setWidth(20));
              },
              itemCount: state.commentsList.length,
            ),
          );
        },
      ),
    );
  }

  // 评论信息
  Widget _itemWidget({
    int index,
  }) {
    int resultNum = int.parse(
        state.commentsList[index]['sd_sysrate_traderate']['result'].toString());
    int serviceAttitudeNum = int.parse(state.commentsList[index]
            ['sd_sysrate_traderate']['customer_service']
        .toString()); // 客服
    int logisticsServiceNum = int.parse(state.commentsList[index]
            ['sd_sysrate_traderate']['logistics_type']
        .toString()); //物流
    List imagesList = []; //rate_pic
    if (state.commentsList[index]['sd_sysrate_traderate']
            ['rate_plist_videoic'] !=
        '') {
      String imagesStr =
          state.commentsList[index]['sd_sysrate_traderate']['list_video'];
      imagesList = imagesStr.split(',');
    }

    /// 评价图
    List videoList = [];
    if (state.commentsList[index]['sd_sysrate_traderate']['rate_pic'] != '') {
      String imagesStr =
          state.commentsList[index]['sd_sysrate_traderate']['rate_pic'];
      videoList = imagesStr.split(',');
    }

    if (videoList.length > 0) {
      imagesList.addAll(videoList);
    }
    List appends =
        state.commentsList[index]['sd_sysrate_traderate']['appends'] ?? [];
    // 追评
    List appendImagesList = [];
    List appendsList =
        state.commentsList[index]['sd_sysrate_traderate']['appends'];
    if (appendsList.length > 0) {
      if (state.commentsList[index]['sd_sysrate_traderate']['appends'][0]
              ['append_rate_pic'] !=
          '') {
        String imageUrl = state.commentsList[index]['sd_sysrate_traderate']
            ['appends'][0]['append_rate_pic'];
        appendImagesList = imageUrl.split(',');
      }
    }

    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 商品信息
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(22),
              top: setWidth(20),
              right: setWidth(22),
              bottom: setWidth(36),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CachedImage(
                  width: setWidth(100),
                  height: setWidth(100),
                  margin: EdgeInsets.zero,
                  scale: BoxFit.fill,
                  path: state.commentsList[index]['item_picture'],
                ),
                SizedBox(
                  width: setWidth(18),
                ),
                Expanded(
                  child: Container(
                    height: setWidth(100),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          state.commentsList[index]['item_name'] ?? '',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 14,
                          ),
                        ),
                        Row(
                          children: [
                            Wrap(
                              spacing: setWidth(20),
                              children: ['', '', '', '', '']
                                  .asMap()
                                  .map((key, value) {
                                    return MapEntry(
                                      key,
                                      Container(
                                        width: setWidth(52),
                                        height: setWidth(52),
                                        alignment: Alignment.center,
                                        child: resultNum > key
                                            ? Image.asset(
                                                'assets/images/fivePointedStar_image.png',
                                                width: setWidth(50),
                                                height: setWidth(50),
                                                fit: BoxFit.fill,
                                              )
                                            : Image.asset(
                                                'assets/images/fivePointedStarGray_image.png',
                                                width: setWidth(50),
                                                height: setWidth(50),
                                                fit: BoxFit.fill,
                                              ),
                                      ),
                                    );
                                  })
                                  .values
                                  .toList(),
                            ),
                            SizedBox(
                              width: setWidth(20),
                            ),
                            Text(
                              resultNum < 3
                                  ? '差评'
                                  : resultNum < 5
                                      ? '中评'
                                      : '好评',
                              style: TextStyle(
                                color: Color(0xffEA5504),
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          // 服务 物流 评级
          Container(
            padding: EdgeInsets.symmetric(
                horizontal: setWidth(20), vertical: setWidth(20)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: setWidth(6),
                    bottom: setWidth(20),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        '服务态度',
                        style: TextStyle(
                          color: Color(0xff666666),
                          fontSize: 14,
                        ),
                      ),
                      SizedBox(
                        width: setWidth(20),
                      ),
                      Wrap(
                        spacing: setWidth(20),
                        children: ['', '', '', '', '']
                            .asMap()
                            .map((key, value) {
                              return MapEntry(
                                key,
                                Container(
                                  //
                                  width: setWidth(52),
                                  height: setWidth(52),
                                  alignment: Alignment.center,
                                  child: serviceAttitudeNum > key
                                      ? Image.asset(
                                          'assets/images/fivePointedStar_image.png',
                                          width: setWidth(50),
                                          height: setWidth(50),
                                          fit: BoxFit.fill,
                                        )
                                      : Image.asset(
                                          'assets/images/fivePointedStarGray_image.png',
                                          width: setWidth(50),
                                          height: setWidth(50),
                                          fit: BoxFit.fill,
                                        ),
                                ),
                              );
                            })
                            .values
                            .toList(),
                      ),
                      SizedBox(
                        width: setWidth(20),
                      ),
                      Text(
                        serviceAttitudeNum < 3
                            ? '差评'
                            : serviceAttitudeNum < 5
                                ? '中评'
                                : '好评',
                        style: TextStyle(
                          color: Color(0xffEA5504),
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      '物流服务',
                      style: TextStyle(
                        color: Color(0xff666666),
                        fontSize: 14,
                      ),
                    ),
                    SizedBox(
                      width: setWidth(20),
                    ),
                    Wrap(
                      spacing: setWidth(20),
                      children: ['', '', '', '', '']
                          .asMap()
                          .map((key, value) {
                            return MapEntry(
                              key,
                              Container(
                                width: setWidth(52),
                                height: setWidth(52),
                                alignment: Alignment.center,
                                child: logisticsServiceNum > key
                                    ? Image.asset(
                                        'assets/images/fivePointedStar_image.png',
                                        width: setWidth(50),
                                        height: setWidth(50),
                                        fit: BoxFit.fill,
                                      )
                                    : Image.asset(
                                        'assets/images/fivePointedStarGray_image.png',
                                        width: setWidth(50),
                                        height: setWidth(50),
                                        fit: BoxFit.fill,
                                      ),
                              ),
                            );
                          })
                          .values
                          .toList(),
                    ),
                    SizedBox(
                      width: setWidth(20),
                    ),
                    Text(
                      logisticsServiceNum < 3
                          ? '差评'
                          : logisticsServiceNum < 5
                              ? '中评'
                              : '好评',
                      style: TextStyle(
                        color: Color(0xffEA5504),
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(22),
              top: setWidth(30),
              right: setWidth(22),
              bottom: setWidth(28),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Offstage(
                  offstage: (state.commentsList[index]['sd_sysrate_traderate']
                              ['content'] ??
                          '') ==
                      '',
                  child: Text(
                    state.commentsList[index]['sd_sysrate_traderate']
                            ['content'] ??
                        '',
                    style: TextStyle(
                      color: Color(0xff2B2B2B),
                      fontSize: 12,
                    ),
                  ),
                ),
                Offstage(
                  offstage: imagesList.length == 0,
                  child: Column(
                    children: [
                      Offstage(
                        offstage: (state.commentsList[index]
                                    ['sd_sysrate_traderate']['content'] ??
                                '') ==
                            '',
                        child: SizedBox(
                          height: setWidth(20),
                        ),
                      ),
                      // if (false)
                      Wrap(
                        spacing: setWidth(20),
                        children: imagesList
                            .asMap()
                            .map((key, value) {
                              // children: ['', '', ''].asMap().map((key, value) {
                              if (value.toString().contains(".mp4")) {
                                return MapEntry(
                                  key,
                                  GestureDetector(
                                    onTap: () {
                                      Get.to(
                                        VideoPlayerPlus(
                                          VideoPlayerController.network(value),
                                        ),
                                      );
                                    },
                                    child: Stack(
                                      alignment: Alignment.center,
                                      children: [
                                        Container(
                                          width: setWidth(100),
                                          height: setWidth(100),
                                          margin: EdgeInsets.zero,
                                          color: Colors.grey,
                                          child: VideoApp(videoUrl: (value)),
                                        ),
                                        Positioned(
                                          child: Icon(Icons.play_circle_fill,
                                              color: Colors.black),
                                        )
                                      ],
                                    ),
                                  ),
                                );
                              } else {
                                return MapEntry(
                                  key,
                                  CachedImage(
                                    width: setWidth(100),
                                    height: setWidth(100),
                                    margin: EdgeInsets.zero,
                                    scale: BoxFit.fill,
                                    path: value,
                                  ),
                                );
                              }

                              // return MapEntry(
                              //   key,
                              //   CachedImage(
                              //     width: setWidth(100),
                              //     height: setWidth(100),
                              //     margin: EdgeInsets.zero,
                              //     scale: BoxFit.fill,
                              //     path: value,
                              //   ),
                              // );
                            })
                            .values
                            .toList(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Offstage(
            offstage:
                state.commentsList[index]['sd_sysrate_traderate']['anony'] != 1,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
              child: Column(
                children: [
                  Text(
                    '已匿名评价',
                    style: TextStyle(
                      color: Color(0xff999999),
                      fontSize: 12,
                    ),
                  ),
                  SizedBox(
                    height: setWidth(20),
                  ),
                ],
              ),
            ),
          ),
          Divider(
            height: setWidth(1),
            indent: setWidth(22),
            endIndent: 0,
          ),
          appends.length > 0
              ? Padding(
                  padding: EdgeInsets.only(
                    left: setWidth(22),
                    top: setWidth(30),
                    right: setWidth(22),
                    bottom: setWidth(40),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '追评',
                        style: TextStyle(
                          color: Color(0xffEA5504),
                          fontSize: 12,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          top: setWidth(22),
                          bottom:
                              appendImagesList.length > 0 ? setWidth(20) : 0,
                        ),
                        child: Text(
                          state.commentsList[index]['sd_sysrate_traderate']
                              ['appends'][0]['append_content'],
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 12,
                          ),
                        ),
                      ),
                      Wrap(
                        spacing: setWidth(20),
                        children: appendImagesList
                            .asMap()
                            .map((key, value) {
                              print("stappendImagesList=$appendImagesList");
                              if (value.toString().contains(".mp4")) {
                                return MapEntry(
                                  key,
                                  GestureDetector(
                                    onTap: () {
                                      Get.to(
                                        VideoPlayerPlus(
                                          VideoPlayerController.network(value),
                                        ),
                                      );
                                    },
                                    child: Stack(
                                      alignment: Alignment.center,
                                      children: [
                                        Container(
                                            width: setWidth(100),
                                            height: setWidth(100),
                                            margin: EdgeInsets.zero,
                                            color: Colors.grey,
                                            child: VideoApp(videoUrl: (value))),
                                        Positioned(
                                          child: Icon(Icons.play_circle_fill,
                                              color: Colors.black),
                                        )
                                      ],
                                    ),
                                  ),
                                );
                              } else {
                                return MapEntry(
                                  key,
                                  CachedImage(
                                    width: setWidth(100),
                                    height: setWidth(100),
                                    margin: EdgeInsets.zero,
                                    scale: BoxFit.fill,
                                    path: value,
                                  ),
                                );
                              }
                            })
                            .values
                            .toList(),
                      ),
                    ],
                  ),
                )
              : Container(
                  height: setWidth(80),
                  padding: EdgeInsets.symmetric(horizontal: setWidth(22)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      InkWell(
                        onTap: () {
                          print('追加评论点击事件！！！');
                          Map<String, dynamic> dataMap = {
                            'tml_num_id':
                                state.orderInformationMap['tml_num_id'], // 订单号
                            'rate_id': state.commentsList[index]
                                ['sd_sysrate_traderate']['rate_id'],
                            'shop_id':
                                state.orderInformationMap['ec_shop_num_id'],
                            'goodsUrl': state.commentsList[index]
                                ['item_picture'],
                            'titleStr':
                                state.commentsList[index]['item_name'] ?? '',
                          };
                          Get.toNamed(RouteConfig.followUpEvaluation,
                                  arguments: dataMap)
                              .then((value) {
                            logic.requestData();
                          });
                        },
                        child: Container(
                          width: setWidth(140),
                          height: setWidth(44),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setWidth(40)),
                            border: Border.all(
                              width: setWidth(1),
                              color: Color(0xffEA5504),
                            ),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '追加',
                            style: TextStyle(
                              color: Color(0xffEA5504),
                              fontSize: 10,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
        ],
      ),
    );
  }
}
